<template>
  <div class="scroll">
    <!-- 设置menu-wrapper的高度，必须小于ul的高度才能滚动 -->
    <div class="menu-wrapper" ref="menuWrapper">
      <ul>
        <li 
        class="menu-item"
        v-for="(menu, index) in menuList"
        :key="index"
        :class="{menuActive: currentIndex == index}"
        @click="clickMenuItem(index)"
        >
        {{menu}}
        </li>
      </ul>
    </div>
    <div class="content-wrapper" ref="contentWrapper">
      <ul>
        <li
        class="item-list" 
        v-for="(item, index) in contentList"
        :key="index"
        >
          {{item}}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      active:0,
      scrollY: 0, // 右侧滑动的Y轴坐标 (滑动过程时实时变化)
      tops: [], // 所有右侧分类li的top组成的数组  (列表第一次显示后就不再变化)
      menuList: [
        '菜单1',
        '菜单2',
        '菜单3',
        '菜单4',
        '菜单5',
        '菜单6',
        '菜单7',
        '菜单8',
      ],
      contentList: [
        '联动内容1',
        '联动内容2',
        '联动内容3',
        '联动内容4',
        '联动内容5',
        '联动内容6',
        '联动内容7',
        '联动内容8',
      ]
    }
  },
mounted () {
    this.$nextTick(() => {
      this._initScroll()
      this._initTops()
    })

  },
methods: {
  // 初始化滚动
  _initScroll() {
    // 列表显示之后创建
    new BScroll(this.$refs.menuWrapper, {
      click: true,
    })
    //右边联动区域
    this.contentScroll = new BScroll(this.$refs.contentWrapper, {
      click: true,
      probeType: 2,  // 因为惯性滑动不会触发
    })
    // 给右侧列表绑定scroll监听
    this.contentScroll.on('scroll', ({x, y}) => {
      this.scrollY = Math.abs(y)
    })
    // 给右侧列表绑定scroll结束的监听
    this.contentScroll.on('scrollEnd', ({x, y}) => {
      this.scrollY = Math.abs(y)
    })

  },
          // 初始化tops
  _initTops() {
    // 1. 初始化tops
    const tops = []
    let top = 0
    tops.push(top)
    // 2. 收集
    // 找到所有分类的li
    const lis = this.$refs.contentWrapper.getElementsByClassName('item-list')
    Array.prototype.slice.call(lis).forEach(li => {
      top += li.clientHeight
      tops.push(top)
    })

    // 3. 更新数据
    this.tops = tops
  },
  clickMenuItem(index) {
    // console.log(index)
    // 使用右侧列表滑动到对应的位置

    // 得到目标位置的scrollY
    const scrollY = this.tops[index]
    // 立即更新scrollY(让点击的分类项成为当前分类)
    this.scrollY = scrollY
    // 平滑滑动右侧列表
    this.contentScroll.scrollTo(0, -scrollY, 300)
  },
},
computed: {
  // 计算得到当前分类的下标
  currentIndex() {// 初始和相关数据发生了变化
    // 得到条件数据
    const {scrollY, tops} = this
    // 根据条件计算产生一个结果
    const index = tops.findIndex((top, index) => {
      // scrollY>=当前top && scrollY<下一个top
      return scrollY >= top && scrollY < tops[index + 1]
    })
    // 返回结果
    return index
  }
},
  watch: {}
}
</script>
<style scoped>
.scroll {
  display: flex;
  justify-content: space-between;
}
/* 左边菜单样式 */
.menu-wrapper {
  width: 20%;
  text-align: center;
  height: 400px;
  overflow: hidden

}
.menuActive {
  background-color: #c4c4c4;
  color: #fff;
  font-weight: bold;
}
.menu-wrapper ul {
  background-color: #fff;
}
.menu-wrapper ul li {
  height: 80px;
  line-height: 80px;  
}
/* 联动区域样式 */
.content-wrapper {
  height: 400px;
  width: 75%;
  text-align: center;
  overflow: hidden;
}
.content-wrapper ul {
  background-color: #fff;
}
.content-wrapper ul li {
  height: 200px;
  line-height: 200px;
  border-top: 1px solid #c4c4c4;
}
</style>